<template>
  <div class="detail main-pd">
    <el-page-header content="详情页面" style="margin-top: 20px" @back="goBack">
    </el-page-header>
    <div class="detail-main main-pdt">
      <el-row class="h-per-100">
        <el-col :span="12" class="h-per-100">
          <codeBox :code="code"></codeBox>
        </el-col>
        <el-col :span="12" class="h-per-100">
          <div class="echarts">
            <div id="main" class="main"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { data } from "@/utils/data";
import echartsFun from "@/utils/echarts";

export default {
  name: "index",
  mixins: [echartsFun],
  components: {
    codeBox: () => import("@/components/code"),
  },
  data() {
    return {
      code: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      let id = ["18", "26", "27", "28", "29", "30", "40",'41','45','53','54','55','56','57','58','59'
      ,'60','73','74','75','77','78'
      ];
      if (!id.includes(this.$route.query.id)) {
        this.initEcharts();
      } else if (this.$route.query.id == 18) {
        this.setEcharts1();
      } else if (this.$route.query.id == 26) {
        this.setEcharts2();
      } else if (this.$route.query.id == 27) {
        this.setEcharts3();
      } else if (this.$route.query.id == 28) {
        this.setEcharts4();
      } else if (this.$route.query.id == 29) {
        this.setEcharts5();
      } else if (this.$route.query.id == 30) {
        this.setEcharts6();
      } else if (this.$route.query.id == 40) {
        this.setEcharts40();
      } else if (this.$route.query.id == 41) {
        this.setEcharts41();
      } else if (this.$route.query.id == 45) {
        this.setEcharts45();
      }else if (this.$route.query.id == 53) {
        this.setEcharts53();
      }else if (this.$route.query.id == 54) {
        this.setEcharts54();
      }else if (this.$route.query.id == 55) {
        this.setEcharts55();
      }else if (this.$route.query.id == 56) {
        this.setEcharts56();
      }else if (this.$route.query.id == 57) {
        this.setEcharts57();
      }else if (this.$route.query.id == 58) {
        this.setEcharts58();
      }else if (this.$route.query.id == 59) {
        this.setEcharts59();
      }else if (this.$route.query.id == 60) {
        this.setEcharts60();
      }else if (this.$route.query.id == 73) {
        this.setEcharts73();
      }else if(this.$route.query.id == 74){
        this.setEcharts74();
      }else if(this.$route.query.id == 75){
        this.setEcharts75();
      }else if(this.$route.query.id == 77){
        this.setEcharts77();
      }else if(this.$route.query.id == 78){
        this.setEcharts78();
      }
    });
  },
  methods: {
    initEcharts() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      let option = {};
      option = data.find((item) => item.id == this.$route.query.id).option;
      option && myChart.setOption(option);
      console.log(option, "opiton");
      window.addEventListener("resize", () => {
        myChart && myChart.resize();
      });

      this.code = `
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      let option ={}
      option=${JSON.stringify(option)}
      option && myChart.setOption(option);

      window.addEventListener('resize',()=>{
        myChart&&myChart.resize()
      })

      `;
    },
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;

  &-main {
    height: calc(100% - 70px);
  }

  .echarts {
    width: 100%;
    height: 100%;

    .main {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
